<template>
	<view>
		<view class="dar" v-if="targetDate != ''">
			<JCalendar ref="JCalendar" :yearMonth="targetDate" :dataSource="signData"
				@dateChange="refeshSignData($event)" @clickChange="updateSign($event)" :isFullCalendar='true'>
			</JCalendar>
		</view>

		<view class="show" v-if="Object.keys(info).length">
			<view class="s1">日期：{{ info.fullDate }}</view>
			<view class="s2">
				<view>
					<view class="ss2">
						<text class=" peo">岗位：</text>
						<text class="status ppp">{{ info.job_name }}</text>
						<text class="peo">所属部门：</text>
						<text class="ppp">{{ info.depart_name }}</text>
					</view>
					<view class="cantant">
						<view>
							<text class="peo">岗位联系人：</text><text class="ppp">{{info.contactor}} {{info.phone}}</text>
						</view>
						<image @click="goPhone" class="phone" src="@/static/phone.png"></image>
					</view>
				</view>
			</view>

			<view class="s3" v-if="info.is_clock=='n'&& info.type==1">
				<view class="cc">
					<view class="t1">签到记录</view>
					<view>
						<text class="peo">场数：</text><text class="ppp">{{info.clock_json.stage||0}}场</text>
					</view>
					<view>
						<text class="peo">信息备注：</text><text class="ppp">{{info.clock_json.note||'-'}}</text>
					</view>
				</view>
			</view>
			<view class="s3" v-if="info.is_clock=='y'&&info.type==1">
				<view class="cc">
					<view class="t1">签到记录</view>
					<view v-for="(item, index) in info.clock_json" :key="index">
						<text class="peo">第{{index+1}}次：</text><text class="ppp">{{item}}</text>
					</view>
				</view>
			</view>

			<view class="s4" v-if='info.status == 2'>
				<u-button type="success" text="情况申述" shape='circle' color='#30D6C2' @click="show = true"></u-button>
			</view>
		</view>

		<u-popup :show="show" @close="close" mode='center' bgColor='transparent'>
			<view class="shensu">
				<view class="t1">情况申述</view>
				<view class="textarea">
					<u--textarea v-model="desc"></u--textarea>
				</view>

				<view class="s4" v-if='info.status == 2'>
					<u-button type="success" text="提交申述" shape='circle' color='#30D6C2' @click="onSetLog()"></u-button>
				</view>

			</view>
		</u-popup>

	</view>
</template>

<script>
	import JCalendar from '@/components/j-calendar.vue';
	export default {
		components: {
			JCalendar
		},
		data() {
			return {
				show: false,
				desc: '',
				targetDate: uni.$u.timeFormat(new Date(), 'yyyy-mm'),
				signData: [],
				inData: '2024-09',
				info: {}
			}
		},
		onLoad(options) {
			// this.id = options.id;
			this.getDateList();
		},
		methods: {
			refeshSignData(e) {
				this.targetDate = e;
				this.getDateList();
				this.info = {}
			},
			updateSign(e) {
				this.targetDate = e
				this.info = e;
				// this.getDateInfo();
			},
			getDateList() {
				let that = this
				that.$API.getDateList({
					id: that.id,
					month: that.targetDate
				}).then(res => {
					that.signData = res.data.monthDuty;
					// that.getDateInfo();
				})
			},
			getDateInfo() {
				let that = this
				that.$API.getDateInfo({
					id: that.id,
					date: that.inData
				}).then(res => {
					that.info = res.data
					console.log(that.info)
				})
			},
			onSetLog() {
				let that = this
				if (this.desc == '') {
					uni.showToast({
						title: '请添加内容',
						duration: 2000,
						icon: 'none'

					});
					return;
				}
				that.$API.setLog({
					id: that.info.id,
					desc: that.desc
				}).then(res => {
					uni.showToast({
						title: res.msg,
						duration: 2000
					});
					this.show = false;
				})
			},
			close() {
				this.show = false
			},
			goPhone() {
				uni.makePhoneCall({
					phoneNumber: this.info.phone,
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F3F4F6;
	}

	.dar {
		width: 702rpx;
		margin: 28rpx auto;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.show {
		width: 654rpx;
		// min-height: 478rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin: 24rpx auto;
		padding: 0 24rpx 28rpx 24rpx;

		.s1 {
			width: 654rpx;
			height: 100rpx;
			line-height: 100rpx;
			font-size: 36rpx;
			color: #000000;
			font-weight: 500;
			border-bottom: 2rpx solid #ECECEC;
			color: #000000;
		}

		.s2 {
			height: 50rpx;
			line-height: 50rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 28rpx;
			color: #606266;
			margin: 32rpx auto;

			.status {
				width: 156rpx;

				&.status_1 {
					color: #3DE4DA;
				}

				&.status_2,
				&.status_0 {
					color: #E4473D;
				}

				&.status_3 {
					color: #3632F5;
				}
			}
		}

		.s3 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.cc {
				width: 100%;
				font-size: 32rpx;
				line-height: 56rpx;
				display: flex;
				flex-direction: column;

				.t1 {
					font-weight: bold;
					margin-bottom: 12rpx;
					color: #000000;
					margin-top: 28rpx;
					margin-bottom: 18rpx;
				}
			}
		}

		.s4 {
			width: 264rpx;
			height: 80rpx;
			margin: 76rpx auto 38rpx auto;
		}
	}

	.shensu {
		width: 622rpx;
		height: 548rpx;
		background: #FFFFFF;
		border-radius: 16rpx;

		.t1 {
			width: 100%;
			height: 56rpx;
			line-height: 56rpx;
			font-size: 32rpx;
			text-align: center;
			margin-top: 50rpx;
			font-weight: 500;

		}

		.textarea {
			width: 554rpx;
			height: 218rpx;
			margin: 36rpx auto 58rpx auto;

			/deep/ .u-textarea {
				width: 524rpx;
				height: 188rpx;
				padding: 15rpx;
			}
		}

		.s4 {
			width: 264rpx;
			height: 80rpx;
			background: #30D6C2;
			border-radius: 40rpx;
			margin: 0 auto;
		}
	}

	.ss2 {
		height: 50rpx;
		line-height: 50rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 28rpx;
		color: #606266;
		margin-top: 30rpx;
	}

	.cantant {
		display: flex;
		align-items: center;
		margin-top: 12rpx;
		margin-bottom: 28rpx;

	}

	.peo {
		font-weight: 400;
		font-size: 28rpx;
		color: #606266;
	}

	.ppp {
		font-weight: 400;
		font-size: 32rpx !important;
		color: #000000 !important;
	}

	.phone {
		margin-left: 32rpx;
		width: 48rpx;
		height: 48rpx;
	}
</style>